<template>
  <div class="box">
    <van-sticky>
      <div class="top">
        <div class="top1">
          <img
            src="../assets/home/logo.jpg"
            alt=""
            style="
              width: 70px;
              height: 30px;
              vertical-align: middle;
              padding-top: 5px;
            "
          />
        </div>
        <div class="top2">
          <van-search
            v-model="sousuo"
            placeholder="请输入搜索关键词"
            @click="goto('/search')"
          />
          <van-button
            @click="gotolog"
            type="danger"
            plain
            style="width: 80px; height: 30px"
            >{{ islog ? userinfo.user_name : "登录" }}</van-button
          >
        </div>
      </div>
    </van-sticky>

    <div class="center">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item
          v-for="item in lunbo"
          :key="item.id"
          style="height: 200px"
        >
          <img :src="item.img" alt="" style="height: 200px" />
        </van-swipe-item>
      </van-swipe>
      <ul class="wuyou">
        <li>
          <img src="../assets/home/yi.png" alt="" class="wang" />
          <span class="yi">网易自营品牌</span>
        </li>
        <li>
          <img src="../assets/home/gou.png" alt="" class="wang" />
          <span class="yi">30天无忧退货</span>
        </li>
        <li>
          <img src="../assets/home/qian.png" alt="" class="wang" />
          <span class="yi">48小时快速退款</span>
        </li>
      </ul>

      <van-grid :gutter="10" :border="false" square>
        <van-grid-item
          v-for="item in data"
          :key="item.cat_one_id"
          @click="toCategory(item.cat_one_id)"
        >
          <van-image :src="fenlei[random()].img" class="muy" />
          <p>{{ item.cat_one_id }}</p>
        </van-grid-item>
      </van-grid>

      <div class="chaodi">
        <div class="chao1">
          <img src="../assets/home/new.png" alt="" />
          <div class="po">
            <div class="day">每日抄底</div>
            <div class="quan">全站底价 放心买</div>
          </div>
        </div>
        <div class="chao2">
          <img src="../assets/home/new2.png" alt="" />
          <div class="po">
            <div class="day">新品首发</div>
            <div class="quan">999+款上新</div>
          </div>
        </div>
      </div>
      <div class="xinren">
        <img
          src="https://yanxuan.nosdn.127.net/04905fdcef889159d7687b119c76b66f.gif?imageView&quality=75&type=jpg"
          alt=""
        />
      </div>
      <div class="mai">
        <img
          src="../assets/home/mai.png"
          alt=""
          style="height: 118px; display: block"
        />
        <img
          src="../assets/home/kaika.png"
          alt=""
          style="height: 62px; display: block"
        />
      </div>
      <h3>—— 新人专享礼 ——</h3>
      <div class="xin">
        <div class="xin1">
          <div class="zhuan">新人专享礼包</div>
          <img
            src="https://yanxuan.nosdn.127.net/352b0ea9b2d058094956efde167ef852.png"
            alt=""
          />
        </div>
        <div class="xin2">
          <div class="xin2-1">
            <div class="cn">
              <div class="fu">福利社</div>
              <div class="jin">今日特价</div>
            </div>
            <img src="../assets/home/shi.png" alt="" />
          </div>
          <div class="xin2-2">
            <div class="cn">
              <div class="fu">新人拼团</div>
              <div class="jin1">1元起包邮</div>
            </div>
            <img
              src="../assets/home/wangyi.png"
              alt=""
              style="width: 110px; height: 110px; float: right"
            />
          </div>
        </div>
      </div>

      <div class="rexiao">
        <h3>类目热销榜</h3>
        <div class="jujia">
          <div class="jujia1">
            <p>居家生活版</p>
            <img
              src="../assets/home/beizi.png"
              alt=""
              style="width: 110px; height: 110px; float: right"
            />
          </div>
          <div class="jujia2">
            <p>服饰鞋包榜</p>
            <img
              src="../assets/home/waitao.png"
              alt=""
              style="width: 110px; height: 110px; float: right"
            />
          </div>
        </div>
      </div>

      <div class="jianlou">
        <div class="jianlou1">
          <div class="zhi">超值捡漏</div>
          <div class="zhuan">买到就赚到</div>
          <div class="tu">
            <img src="../assets/home/nan1.png" alt="" />
            <img src="../assets/home/nan2.png" alt="" />
          </div>
        </div>
        <div class="jianlou2">
          <div class="zhi">严选竞拍</div>
          <div class="zhuan">珍品0元拍</div>
          <div class="tu">
            <img src="../assets/home/feicui.png" alt="" />
            <img src="../assets/home/feicui2.png" alt="" />
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="bo">
        <van-button color="#fff" plain size="small" class="btn1"
          >下载APP</van-button
        >
        <van-button color="#fff" plain size="small"> 电脑版</van-button>
      </div>
      <div class="gongsi">
        网易公司版权所有 © 1997-<br />
        食品经营许可证：JY13301080111719
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapState } from "vuex";
export default {
  name: "Home",
  data() {
    return {
      sousuo: "",
      data: [],
      lunbo: [
        {
          img: require("../assets/home/lun1.png"),
          id: 1,
        },
        {
          img: require("../assets/home/lunbo2.png"),
          id: 2,
        },
        {
          img: require("../assets/home/lunbo3.png"),
          id: 3,
        },
        {
          img: require("../assets/home/lun4.png"),
          id: 4,
        },
        {
          img: require("../assets/home/lun5.png"),
          id: 5,
        },
      ],
      fenlei: [
        {
          img: "https://yanxuan.nosdn.127.net/6c3bd9d885c818b1f73e497335a68b47.png",
          index: 11,
        },
        {
          img: "https://yanxuan.nosdn.127.net/896a3beac514ae8f40aafe028e5fec56.png",
          index: 12,
        },
        {
          img: "https://yanxuan.nosdn.127.net/fbca8e1f2948f0c09fc7672c2c125384.png",
          index: 13,
        },
        {
          img: "https://yanxuan.nosdn.127.net/f7281169d4e82d5d8d52aa1fec83fe01.png",
          index: 14,
        },
        {
          img: "https://yanxuan.nosdn.127.net/896a3beac514ae8f40aafe028e5fec56.png",
          index: 15,
        },
        {
          img: "https://yanxuan.nosdn.127.net/f7281169d4e82d5d8d52aa1fec83fe01.png",
          index: 16,
        },
        {
          img: " https://yanxuan.nosdn.127.net/5c088559ebcc3f0ffcda663f04dfbeb2.png",
          index: 17,
        },
        {
          img: "https://yanxuan.nosdn.127.net/c6fd8835a6400b7da7a016ad85506b69.png",
          index: 18,
        },
        {
          img: "https://yanxuan.nosdn.127.net/static-union/16309892614fb44c.gif",
          index: 19,
        },
      ],
    };
  },
  created() {
    this.getcategory();
  },
  computed: {
    ...mapState("user", ["userinfo"]),
    ...mapGetters("user", ["islog"]),
  },
  methods: {
    goto(url) {
      this.$router.push(url);
    },
    async getcategory() {
      const {
        data: { data },
      } = await this.$request.get("/api/goods/category");
      const it = data.list.findIndex((i) => i.cat_one_id == "其他");
      if (it >= 0) {
        const its = data.list.splice(it, 1);
        data.list.push(its[0]);
      }
      this.data = data.list;
    },
    random() {
      return parseInt(Math.random() * this.fenlei.length);
    },
    async toCategory(cat_one_id) {
      this.$router.push({
        path: "/category",
        query: {
          cat_one_id,
        },
      });
    },
    // ...mapGetters("user", ["islog"]),
    gotolog() {
      if (!this.islog) {
        this.$router.push("/login");
      } else {
        this.$toast("用户已登录");
        return;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.box {
  width: 100%;
  .top {
    padding: 5px;
    box-sizing: border-box;
    width: 100%;
    height: 54px;
    display: flex;
    align-items: center;
    background-color: #fff;
    .top1 {
      font-size: 16px;
      margin-left: 20px;
    }
    .top2 {
      display: flex;
      align-items: center;
      .van-search {
        width: 180px;
      }
      .van-button {
        width: 40px;
        margin-right: 20px;
      }
    }
  }
  .center {
    padding: 5px;
    box-sizing: border-box;
    width: 100%;
    .my-swipe .van-swipe-item {
      color: #fff;
      font-size: 20px;
      line-height: 150px;
      text-align: center;
      background-color: #39a9ed;
    }
    .wuyou {
      width: 100%;
      margin-top: 8px;
      display: flex;
      justify-content: space-around;
      text-align: center;
      margin-bottom: 10px;
      .wang {
        width: 17px;
        height: 17px;
        vertical-align: middle;
      }
      .yi {
        font-size: 14px;
        vertical-align: middle;
      }
    }
    .muy {
      width: 60px;
      height: 60px;
    }
    .chaodi {
      display: flex;
      justify-content: space-around;
      .chao1 {
        width: 190px;
        height: 126px;
        position: relative;
        img {
          width: 100%;
          height: 100%;
        }
        .po {
          position: absolute;
          left: 20px;
          top: 14px;
          .day {
            font-size: 17px;
            font-weight: 900;
          }
          .quan {
            color: rgb(128, 55, 211);
            font-size: 13px;
          }
        }
      }
      .chao2 {
        width: 190px;
        height: 126px;
        position: relative;
        img {
          width: 100%;
          height: 100%;
        }
        .po {
          position: absolute;
          left: 20px;
          top: 14px;
          .day {
            font-size: 17px;
            font-weight: 900;
          }
          .quan {
            color: rgb(128, 55, 211);
            font-size: 13px;
          }
        }
      }
    }
    .xinren {
      background: #ccc;
      width: 100%;
      height: 190px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .mai {
      width: 100%;
      img {
        width: 100%;
      }
    }
    .xin {
      display: flex;
      justify-content: center;
      .xin1 {
        width: 190px;
        height: 240px;
        background: #f9e9cf;
        margin-right: 3px;
        .zhuan {
          text-align: left;
          font-size: 17px;
          padding-top: 16px;
          padding-left: 16px;
          box-sizing: border-box;
          margin-bottom: 20px;
        }
        img {
          width: 142px;
          height: 142px;
        }
      }
      .xin2 {
        width: 190px;
        height: 240px;
        .xin2-1 {
          background: #fbe2d3;
          margin-bottom: 3px;
          position: relative;
          height: 50%;
          .cn {
            position: absolute;
            padding-left: 16px;
            padding-top: 16px;
            box-sizing: border-box;
            .fu {
              font-size: 17px;
            }
          }
          img {
            width: 110px;
            height: 110px;
            float: right;
          }
        }
        .xin2-2 {
          background: #ffecc2;
          height: 50%;
          .cn {
            position: absolute;
            padding-left: 16px;
            padding-top: 16px;
            box-sizing: border-box;
            .fu {
              font-size: 17px;
            }
            .jin1 {
              background: #cbb693;
              color: white;
              font-size: 12px;
              line-height: 14px;
            }
          }
        }
      }
    }
    .jujia {
      display: flex;
      justify-content: space-around;
      margin-bottom: 10px;
      .jujia1 {
        width: 49%;
        height: 110px;
        background: #f9f3e4;
        position: relative;
        p {
          position: absolute;
          left: 15px;
          top: 15px;
        }
      }
      .jujia2 {
        position: relative;
        width: 49%;
        height: 110px;
        background: #ebeff6;
        p {
          position: absolute;
          left: 15px;
          top: 15px;
        }
      }
    }
    .jianlou {
      margin: 20px 0 20px 0;
      display: flex;
      justify-content: center;
    }
    .jianlou1 {
      width: 190px;
      height: 145px;
      background-color: #f5f5f5;
      margin-right: 5px;
      .zhi {
        font-size: 17px;
        text-align: left;
        padding-top: 14px;
        padding-left: 14px;
        box-sizing: border-box;
      }
      .zhuan {
        font-size: 13px;
        color: rgb(128, 55, 211);
        padding-left: 14px;
        box-sizing: border-box;
        text-align: left;
      }
      .tu {
        display: flex;
        img {
          width: 82px;
          height: 82px;
        }
      }
    }
    .jianlou2 {
      background-color: #f5f5f5;
      .zhi {
        font-size: 17px;
        text-align: left;
        padding-top: 14px;
        box-sizing: border-box;
        padding-left: 14px;
      }
      .zhuan {
        font-size: 13px;
        color: rgb(128, 55, 211);
        padding-left: 14px;
        box-sizing: border-box;
        text-align: left;
      }
      .tu {
        display: flex;
        img {
          width: 82px;
          height: 82px;
          padding-left: 15px;
          box-sizing: border-box;
        }
      }
    }
  }
  .bottom {
    padding-bottom: 50px;
    width: 100%;
    height: 135px;
    background-color: #414141;
    .bo {
      .van-button {
        margin-top: 30px;
        margin-bottom: 20px;
        background-color: #414141;
        margin-right: 27px;
      }
    }
    .gongsi {
      color: #999;
      font-size: 13px;
    }
  }
}
</style>
